<template>
  <div class="wh100" ref="vehicleAlarmBarRef"></div>
</template>
<script>
import _ from 'lodash'
export default {
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      let myChart = this.$echarts.init(this.$refs.vehicleAlarmBarRef)
      let data = {
        today: {
          name: '今天',
          data: [
            {
              value: 5,
              label: '超速',
            },
            {
              value: 12,
              label: 'SOS',
            },
            {
              value: 10,
              label: '偏移',
            },
            {
              value: 7,
              label: '其他',
            },
          ],
        },
        male: {
          name: '昨天',
          data: [
            {
              value: 5,
              label: '超速',
            },
            {
              value: 19,
              label: 'SOS',
            },
            {
              value: 23,
              label: '偏移',
            },
            {
              value: 43,
              label: '其他',
            },
          ],
        },
      }
      let yAxisData = new Set()
      let legendData = []
      _.forEach(data, (d) => {
        legendData.push(d.name)
        _.forEach(d.data, (item) => {
          yAxisData.add(item.label)
        })
      })

      let top = 60
      let bottom = 60

      yAxisData = [...yAxisData]
      let option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          left: 'center',
          top: 24,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          data: legendData,
        },
        grid: [
          {
            left: '10%',
            width: '28%',
            height: '65%',
            containLabel: true,
            bottom,
          },
          {
            left: '52%',
            width: '0%',
            height: '60%',
            bottom: bottom + 16,
          },
          {
            right: '12%',
            width: '28%',
            containLabel: true,
            height: '65%',
            bottom,
          },
        ].map((item) =>
          _.merge(
            {
              top,
            },
            item
          )
        ),
        xAxis: [
          {
            type: 'value',
            inverse: true,
            axisLabel: {
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            show: true,
          },
          {
            gridIndex: 2,
            type: 'value',
            axisLabel: {
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ].map((item) =>
          _.merge(item, {
            axisLabel: {
              color: '#949AA8',
              margin: 0,
            },
            splitLine: {
              lineStyle: {
                color: '#E0E0E0',
                type: 'dashed',
              },
            },
          })
        ),
        yAxis: [
          {
            position: 'right',
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            position: 'center',
            axisLabel: {
              align: 'center',
              padding: [8, 0, 0, 0],
              fontSize: 12,
              color: `#fff`,
            },
            axisLine: {
              show: false,
            },
          },
          {
            gridIndex: 2,
            position: 'left',
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ].map((item) => {
          return _.merge(item, {
            type: 'category',
            inverse: false,
            axisLine: {
              lineStyle: {
                color: '#fff',
              },
            },
            axisTick: {
              show: false,
            },
            data: yAxisData,
          })
        }),
        series: [
          {
            name: _.get(data, 'male.name'),
            label: {
              position: 'left',
            },
            itemStyle: {
              color: '#01C5B2',
              barBorderRadius: [4, 0, 0, 4],
            },
            data: _.map(_.get(data, 'male.data'), (d) => d.value),
          },
          {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: _.get(data, 'today.name'),
            label: {
              position: 'right',
            },
            itemStyle: {
              color: '#FB6F6C',
              barBorderRadius: [0, 4, 4, 0],
            },
            data: _.map(_.get(data, 'today.data'), (d) => d.value),
          },
        ].map((item) =>
          _.merge(item, {
            type: 'bar',
            barWidth: 11,
            label: {
              show: true,
              fontFamily: 'Rubik-Medium',
              fontSize: 14,
              distance: 10,
            },
          })
        ),
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
.wh100 {
  height: 100%;
  width: 100%;
}
</style>
